<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>人员管理</title>
    <link href="../../component/pear/css/pear.css" rel="stylesheet" />
    <style>
        .user-container{
            border: 1px solid #eee;
            height: 42px;
            padding-top: 8px;
            padding-left: 6px;
        }
    </style>
</head>
<body class="pear-container">
<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">已选人员</label>
                <div class="layui-input-block user-container">
                    <div class="layui-btn-container tag" lay-filter="users">
                        @for(item in curUsers!){
                        <button lay-id="${item.id!}" type="button" class="tag-item layui-btn layui-btn-primary layui-btn-sm">${item.username!}</button>
                        @}
                    </div>
                </div>
            </div>
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">角色名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="roleName" placeholder="" class="layui-input" autocomplete="off">
                </div>
            </div>
            <div class="layui-form-item layui-inline">
                <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="role-query">
                    <i class="layui-icon layui-icon-search"></i>
                    查询
                </button>
                <button type="reset" class="pear-btn pear-btn-md">
                    <i class="layui-icon layui-icon-refresh"></i>
                    重置
                </button>
            </div>
            <div class="layui-form-item">
                <table id="user-table" lay-filter="user-table"></table>
            </div>
            <div class="layui-form-item">
                <div class="bottom" style="background-color: transparent; border: 0px;">
                    <div class="button-container">
                        <button class="pear-btn pear-btn-primary pear-btn-sm" id="user-save">
                            <i class="layui-icon layui-icon-sav"></i>
                            保存
                        </button>
                        <button class="pear-btn pear-btn-sm" id="user-cancel">
                            <i class="layui-icon layui-icon-refresh"></i>
                            取消
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
    var users = new Array();
    @for(item in curUsers!){
        users.push("${item.id}");
    @}

    layui.use(['table','form','jquery','tag'],function () {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let tag = layui.tag;

        let MODULE_PATH = "${ctxPath}/role/";

        let cols = [[
            {type:'checkbox'},
            {title: '登录名', field: 'usercode', align:'center'},
            {title: '员工姓名', field: 'username', align:'center'},
            {title: '最近登录时间', field: 'lastLogin', align:'center'}
        ]];

        table.render({
            elem: '#user-table',
            url: MODULE_PATH + 'data/userlist',
            page: true,
            cols: cols,
            skin: 'line',
            toolbar: '',
            height: 'full-225',
            defaultToolbar: '',
            done: function (res, curr, count) {
                currentArray = res.data;
                if(users.length>0){
                    var tbl = $('#user-table').next('.layui-table-view');
                    for(var i in currentArray) {
                        for(var j in users){
                            if(users[j]==currentArray[i].id){
                                tbl.find('table>tbody>tr').eq(i).find('td').eq(0).find('input[type=checkbox]').prop('checked', true);
                                // tbl.find('table>tbody>tr').eq(i).find('td').eq(0).find('input[type=checkbox]').click();
                            }
                        }
                    }
                    form.render('checkbox');
                }
            }
        });

        table.on('checkbox()',function (obj) {
            if(obj.checked){
                tag.add('users', {text: obj.data.username,id: obj.data.id});
                users.push(obj.data.id);
            }else{
                tag.delete('users', obj.data.id);
            }
        });

        tag.on('delete(users)', function(data) {
            users.splice(data.index, 1);
        });

        window.refresh = function(){
            table.reload('user-table');
        }

        $("#user-save").click(function () {
            var roleid = "${roleid}";
            $.ajax({
                url: MODULE_PATH+"data/changeUsers",
                dataType:'json',
                data: {
                    roleid: roleid,
                    users: users.join(",")
                },
                type:'post',
                success:function(result){
                    if(result&&result.code==0) {
                        parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
                    }else{
                        layer.msg(result.message,{icon:2,time:1000});
                    }
                }
            });
        });

        $("#user-cancel").click(function () {
            parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
        });
    })
</script>
</body>
</html>